<template>
  <!-- 相册组件 首页展示 -->
  <div class="album">
    <ul class="grid-list" v-if="type == 0">
      <li class="list-item" v-for="(item, index) in data" :key="index">
        <div class="view-top">
          <img :src="defaultImg" />
          <i class="setting" @click="setting"></i>
          <span class="name">名称</span>
          <span class="count">0</span>
        </div>
        <div class="view-bottom">
          <ul class="tool-list">
            <li class="list-item">
              <i class="icon upload"></i>
              <span class="text">上传</span>
            </li>
            <li class="list-item">
              <i class="icon submit"></i>
              <span class="text">交片</span>
            </li>
            <li class="list-item">
              <i class="icon share"></i>
              <span class="text">分享</span>
            </li>
            <li class="list-item">
              <i class="icon delete"></i>
              <span class="text">删除</span>
            </li>
          </ul>
        </div>
      </li>
    </ul>

    <ul class="column-list" v-if="type == 1">
      <li class="list-item" v-for="(item, index) in data" :key="index">
        <div class="view-left">
          <img :src="defaultImg" />
        </div>
        <div class="view-right">
          <span class="name">
            <p>名称</p>
          </span>
          <span class="count">数量</span>
          <span class="date">日期</span>
        </div>
      </li>
    </ul>

  </div>
</template>

<script type="text/ecmascript-6">

import liveDefault from 'common/images/live-default.png'

export default {
  props: {
    data: {  
      type: Number,
      default: 0 
    },
    type: { //grid 0, column 1
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      defaultImg: liveDefault
    }
  },
  components: {

  },
  methods: {
    setting: function () {
      this.$router.push({
        path: '/album/setting'
      })
    }
  },
  computed: {
  }
}
</script>

<style scoped lang="stylus">

@import '../../common/stylus/mixin.styl'
@import '../../common/stylus/variable.styl'

.album
  width 100%
  height 100%
  .grid-list
    .list-item
      display flex
      flex-direction column
      width 100%
      height 225px
      .view-top
        position relative
        height 175px
        text-align center
        background-color #b3b3b3
        color #ffffff
        font-size $font-size-small        
        img 
          height 100%
        .setting
          position absolute
          top 10px
          right 10px
          display block
          width 20px
          height 20px
          bg-image('../../common/images/setting1')
          background-size 20px 20px
          extend-click() 
        .name
          position absolute
          top 10px
          left 10px
        .count
          position absolute 
          right 10px
          bottom 10px
          line-height 1
          padding 4px 8px    
          background-color #666666
          border-radius 3px
      .view-bottom
        height 50px
        .tool-list
          display flex
          .list-item
            height 50px
            display flex
            flex-direction column
            flex 1
            .icon
              flex 3
              background-position center center
              &.upload
                bg-image('../../common/images/upload')
                background-size 22px 17px 
              &.submit
                bg-image('../../common/images/submit')
                background-size 22px 18px
              &.share
                bg-image('../../common/images/share')
                background-size 20px 15px
              &.delete
                bg-image('../../common/images/delete')
                background-size 18px 18px
            .text
              flex 2
              text-align center
              font-size $font-size-small-s
  .column-list
    .list-item
      display flex
      padding 15px
      border 1px solid rgba(0, 0, 0, .1)   
      .view-left
        width 90px
        height 90px
        background-color #b3b3b3
        text-align center
        img 
          width 75px
          height 75px
          margin-top 7.5px 
      .view-right
        display flex
        flex 1
        margin-left 20px
        flex-direction column
        color #333333
        font-size $font-size-medium
        span
          display flex  
          flex 1
          align-items center
          p
            line-height 1

</style>
